// components/navbar/index.js

import { navBack } from '@/utils/util'
import { toIndexPage } from '@/utils/page'

Component({

  options: {
    addGlobalClass: true
  },

  properties: {
    title: {
      type: String,
      value: ''
    }, 
    fixed: { // 是否固定到顶部
      type: Boolean,
      value: true,
    },
    fixedFullHeight: { //固定到顶部时，是否占满高度
      type: Boolean,
      value: true,
    },
    showSearch: { // 是否显示搜索区域
      type: Boolean,
      value: true
    },
    showSearchInput: { // 是否显示搜索输入框：true显示输入框 ，false搜索图标
      type: Boolean,
      value: true
    },
    showSearchBtn: { // 是否显示搜索按钮
      type: Boolean,
      value: false
    },
    background: { // 导航栏背景色
      type: String,
      value: '#f9f9f9'
    },
    disabled: { // 输入框禁用
      type: Boolean,
      value: true
    },
    focus: { // 是否自动获取焦点
      type: Boolean,
      value: false
    },
    keyword: String, // 输入框内容
    height: Number, // 导航栏高度，使用双向绑定 model:height 获取更新的值
  },

  data: {
    haveBack: true, // 是否有返回按钮 ， true是有，反之没有
    buttonTop: 0, // 胶囊到顶部的距离
    buttonRight: 0, // 胶囊所占宽度
  },

  // 定义组件生命函数
  lifetimes: {
    attached () {
      // 有大于可后退的1个页面，则显示后退按钮 
      const haveBack = getCurrentPages().length > 1

      // 右上角胶囊的数据
      const { top, width } = wx.getMenuButtonBoundingClientRect()

      this.setData({ 
        haveBack,
        buttonTop: top,
        buttonRight: width + 15
      })

      // 获取导航高度
      this.createSelectorQuery().select('#navbar').boundingClientRect((res) => {
        this.setData({ height: res.height })
      }).exec() // 不要少了exec
    }
  },

  methods: {
    // 点击后退或首页图标
    handleBack() {
      if (this.data.haveBack) { // 后退图标
        navBack()
      } else { // 首页图标
        toIndexPage()
      }
    },

    // 点击禁用时的搜索输入框或搜索图标
    handleDisabled(e) {
      if (this.properties.disabled) {
        // console.log('handleDisabled')
        this.triggerEvent('clickDisabled', e)
      }
    },

    // 输入框确认时
    confirmInput() {
      // console.log("confirmInput")
      const {keyword} = this.data
      this.triggerEvent('search', {keyword: keyword})
    },

    // 清空
    handleClear() {
      this.setData({keyword: '', focus: true})
      this.triggerEvent('clear')
    }

  }

})